<template>
  <el-card>
    <template #header>订单展示数据</template>

    <div class="charts">
      <!-- 1.0 曲线图 -->
      <!-- <LineChart /> -->

      <!-- <div>
        <div ref="main" style="width: 600px; height: 400px"></div>
      </div> -->

      <div class="line-charts">
        <h3>订单数据周对比</h3>
        <line-chart />
      </div>

      <!-- 2.0 饼图 -->
      <div class="pai-charts">
        <PieChart01 />
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import LineChart from './components/LineChart.vue'
import PieChart01 from './components/PieChart01.vue'
// import PieChart01 from './components/PieChart01.vue'
export default {
  components: {
    LineChart,
    PieChart01
  }
  // mounted() {
  //   this.initData()
  // },
  // methods: {
  //   initData() {
  //     // 基于准备好的dom，初始化echarts实例
  //     var myChart = echarts.init(this.$refs.main)
  //     // 绘制图表
  //     myChart.setOption({
  //       title: {
  //         text: 'ECharts 入门示例'
  //       },
  //       tooltip: {},
  //       xAxis: {
  //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  //       },
  //       yAxis: {},
  //       series: [
  //         {
  //           name: '销量',
  //           type: 'bar',
  //           data: [5, 20, 36, 10, 10, 20]
  //         }
  //       ]
  //     })
  //   }
  // }
}
</script>

<style lang="less" scoped>
.charts {
  display: flex;
  justify-content: space-between;
}
.line-charts {
  flex: 0 0 60%;
  padding-top: 20px;

  h3 {
    text-align: center;
  }
}
.pai-charts {
  flex: 0 0 40%;
  background-color: pink;
}
</style>
